
<template>
	<view class="content">
		
		<!-- <view class="login_img"><image mode="aspectFill" src="/static/image/iamhe.png"></image></view> -->
		
		<view class="login_from">
			<view class="login_from_input">
				<view class="login_from_name">用户名</view>
				<view class="login_from_fun"><input type="text" placeholder="请输入用户名" @blur="setName" v-model="username"></view>
			</view>
			<label style="font-size: 20rpx;color: red;" v-if="showNameNotSet">请输入用户名</label>
			<view class="login_from_input">
				<view class="login_from_name">账号</view>
				<view class="login_from_fun"><input type="text" placeholder="请输入账号" @blur="setAccount" v-model="account"></view>
			</view>
			<label style="font-size: 20rpx;color: red;" v-if="showAccountNotSet" >请输入账号</label>
			<view class="login_from_input">
				<radio-group  @change="changeGender"><text style="margin-right: 60rpx;" >性别</text>
				<label class="radio" style="margin-right: 20rpx;"><radio value="1"  checked="true" />男</label>
				<label class="radio"><radio value="2" />女</label>
				</radio-group>
			</view>
			
			<view class="login_from_input">
				<view class="login_from_name">邮箱</view>
				<view class="login_from_fun"><input type="text" placeholder="请输入邮箱" v-model="email" @blur="setEmail"></view>
			</view>
			<label style="font-size: 20rpx;color: red;" v-if="showEmailNotSet">请输入邮箱</label>
			
			<view class="login_from_input">
				<view class="login_from_name">手机号</view>
				<view class="login_from_fun"><input type="text" placeholder="请输入手机号" v-model="phone" @blur="setPhone"></view>
			</view>
			<label style="font-size: 20rpx;color: red;" v-if="showPhoneNotSet">请输入<label v-if="isRightPhone">正确的</label>手机号</label>
			
			
			<view class="login_from_input">
				<view class="login_from_name">地址:</view>
				<view class="login_from_fun" style="justify-content: start;">
					<view style="height: 50rpx;float: left;width: 200rpx;">
						<picker mode="multiSelector" :range="regionList" range-key="regionName" @change="changeRegion"
							@columnchange="regionColumnChange"> {{region}} </picker>
					</view>
				</view>
			</view>

			

			<view class="login_from_input">
				<view class="login_from_name">密码</view>
				<view class="login_from_fun"><input type="digit" password="true" placeholder="请输入登录密码" v-model="password"  @blur="setPassword"></view>
			</view>
			<label style="font-size: 20rpx;color: red;" v-if="showPasswordNotSet" >请输入密码</label>
			<view class="login_from_input">
				<view class="login_from_name" style="font-size: 30rpx;">确认密码</view>
				<view class="login_from_fun"><input type="digit" password="true" placeholder="请再次输入登录密码" v-model="passwordConfirm" @blur="setPasswordConfirm"></view>
			</view>
			<label style="font-size: 20rpx;color: red;" v-if="showPasswordConfirmNotSet" >与第一次输入的密码不同</label>
			
			<view class="login_from_dl">
				<button @click="register" style="background-color: #ff509d;">注册</button>
			</view>
			
			<view class="logo_xieyi">
				<label @click="moutcl" :class="gouxSta?'cuIcon-squarecheckfill':'cuIcon-square'"></label>
				<view class="logo_text">请勾选并阅读<text>《注册协议》</text>及<text>《隐私协议》</text></view>
			</view>
			
		</view>
		
	</view>
</template>
<script setup>
import {baseUrl,isEmail} from '../../static/js/common.js'
import { ref } from 'vue';
import {onShow} from '@dcloudio/uni-app'
	let gouxSta=ref(false)
	let Qztime=ref('')
	let QzyzmStare=false
	let Qztext=ref('获取验证码')
	
	let email=''
	let username=''
	let account=''
	let password=''
	let passwordConfirm=''
	let code=''
	let sex=1
	let generalCode=''
	let phone=''
	
	
	let showNameNotSet=ref(false)
	let showAccountNotSet=ref(false)
	let showPhoneNotSet=ref(false)
	let isRightPhone=ref(false)
	let showEmailNotSet=ref(false)
    let isRightEmail=ref(false)
	let showPasswordNotSet=ref(false)
	let showPasswordConfirmNotSet=ref(false)
	let emailOK=false
	
	const regionList = ref([])
	let region = ref('')
	let regionId = [1000000, 1000034, 0]
	
	onShow(()=>{
		requestRegion()
	})
		
		function regionColumnChange(e) {
			let column = e.detail.column
			let index = e.detail.value
			let regionInfo = regionList.value[column][index]
			if (regionInfo != null) {
				regionId[column] = regionInfo.regionId
				requestColumn(column, regionInfo.regionId)
			}
		
		}
		
		function requestColumn(column, regionId) {
			if (column < 2) {
				uni.request({
					url: baseUrl + '/region/column',
					data: {
						regionId
					},
					success: (res) => {
						regionList.value[column + 1] = res.data.data
					}
				})
			}
		}
		
		function requestRegion() {
			let params = {
		
			}
			uni.request({
				url: baseUrl + '/region/list',
				data: params,
				success: (res) => {
					regionList.value = [...res.data.data.lists]
					let e = {
						detail: {
							value: [0, 0, 0]
						}
					}
					changeRegion(e)
				}
			})
		}
		
		function changeRegion(e) {
			if (regionList.value[2].length === 0) {
				region.value = regionList.value[1][e.detail.value[1]].regionName
			} else {
				region.value = regionList.value[2][e.detail.value[2]].regionName
			}
		
		}
		
		function moutcl(){
			if( gouxSta.value == false){
				gouxSta.value = true
			}else{
				gouxSta.value = false
			}
		}
		
		function changeGender(e){
			sex=e.detail.value
		}
		
		function register(){
			if( gouxSta.value == false){
				uni.showToast({
					"title":"请阅读并勾选用户协议",
					"icon":'none'
				})				
			}else{
				let checkResult=checkParams()
				if(checkResult!=null){
					uni.showToast({
						icon:'error',
						title:checkResult
					})
					return 
				}else{
					
					let  params={
						email,username,account,password,sex,regionId,phone
					}
					
					uni.request({
						url:baseUrl+"/user/register",
						method:'POST',
						data:params,
						success:res=>{
							if(res.data.code==200){
								uni.showToast({
									icon:'success',
									title:'注册成功'
								})
								// 延时跳转
								setTimeout(() => {
									uni.navigateTo({
										url: "/pages/login/login"
									})
								}, 1000)
							}
							
							if(res.data.code==400){
								uni.showToast({
									icon:'error',
									title:res.data.msg
								})
							}
						}
					})
				}
				
			}		
		}
		
		
		function getCode(){
					var num = 60;
					if(emailOK!=true){
						uni.showToast({
							icon:'error',
							title:'邮箱还没准备好'
						})
					}
					if( QzyzmStare == false && emailOK==true){
						Qztime.value ='60';
						Qztext.value = 's后获取';
						QzyzmStare = true;
						var interval = setInterval(() =>{
								--Qztime.value
							},1000)
						setTimeout(()=>{
							clearInterval(interval)
							Qztext.value = '获取验证码'
							Qztime.value = ''
							QzyzmStare = false
						},60000)
						//发送验证码
						uni.request({
							url:baseUrl+"/user/sendCode",
							method:'GET',
							data:{'emailAddr':email},
							success:res=>{
								generalCode=res.data.data-8
								uni.showToast({
									icon:'success',
									title:'发送成功'
								})
							}
							
						})
					}
					
			}
				
		//以下为参数校验方法
		
		function checkParams(){
			if(username==null||username==''){
				return "请填写用户名?";
			}
			if(account==null||account==''){
				return "请填写账号?";
			}
			if(account.length<5){
				return "账号不能小于5位";
			}
			if(email==null||email==''){
				return "请填写邮箱？";
			}
			if(!isEmail(email)){
				uni.showToast({
					icon:'error',
					title:'请填写正确邮箱?'
				})
			}
			if(password==null||password==''){
				if(password.length<8){
					return "密码不能小于8位";
				}
				return "请填写密码?";
			}
			if(passwordConfirm==null||passwordConfirm==''){
				return "两次密码填写不一致";
			}
			return null;
		}
		
		function setName(){
			if(username==null||username==''){
				showNameNotSet.value=true
			}
			else if(username!=null&&username!=''){
				showNameNotSet.value=false
			}
		}
		
		function setAccount(){
			if(account==null||account==''){
				showAccountNotSet.value=true
			}
			else if(account!=null&&account!=''){
				showAccountNotSet.value=false
			}
		}
		
		function setPhone(){
			if(phone==null||phone==''){
				showPhoneNotSet.value=true
			}
			else if(phone!=null&&phone!=''){
				showPhoneNotSet.value=false
			}
		}
		
		function setEmail(){
			if(email==null||email==''){
				showEmailNotSet.value=true
			}
			else if(email!=null&&email!=''){
				if(isEmail(email)){
					showEmailNotSet.value=false
					isRightEmail.value=false
					emailOK=true
				}
				else{
					showEmailNotSet.value=true
					isRightEmail.value=true
				}
			}
		}
		
		function setPassword(){
			if(password==null||password==''){
				showPasswordNotSet.value=true
			}
			else if(password!=null&&password!=''){
				showPasswordNotSet.value=false
			}
		}
		
		function setPasswordConfirm(){
			if(passwordConfirm==null||passwordConfirm==''||passwordConfirm!=password){
				showPasswordConfirmNotSet.value=true
			}
			else if(passwordConfirm!=null&&passwordConfirm!=''&&passwordConfirm==password){
				showPasswordConfirmNotSet.value=false
			}
		}
		
		
</script>
<style scoped>
	
	page{ background: #fff; }
	
	.login_img{ width: 100%; height: auto; margin-top: 90upx; }
	.login_img image{ width: 170upx; height: 170upx; display: block; margin: 0px auto; border-radius: 50%; }
	
	.login_from{ width: 100%; height: auto; box-sizing: border-box; padding: 20upx 8%; }
	
	.login_from_input{ width: 100%; height:auto; display: flex; flex-direction: row; justify-content: space-between; align-items: center; border-bottom: 1px #eee solid; padding: 40upx 0px; margin: 0px auto;  } 
	
	.login_from_name{ width: 20%; }
	.login_from_fun{ width: 80%; display: flex; flex-direction: row; justify-content: flex-end; align-items: center;  }
	.login_from_fun input{ width: 100%; text-align: left; font-size: 14px;  }
	
	
	.login_from_dl{ width: 100%; height: 50px; line-height: 50px; margin-top: 150upx;   }
	.login_from_dl button{ width: 100%; height: 50px; line-height: 50px; background: #FF3B00; color: #fff; border-radius: 50px; }
	
	.logo_xieyi{ width: 100%; height: 40px; line-height: 40px; display: flex; flex-direction: row; margin-top: 30upx; align-items: center; color: #444; font-size: 14px; justify-content: center; }
	.logo_xieyi label{ font-size: 18px; margin-right: 1%; display: block; width: 15px; height: 15px; }
	
	.cuIcon-squarecheckfill{ color: #FF3B00; }
	.logo_text text{ color: #FF3B00; }
	
	.getyzm{ width: 60%; display: flex; flex-direction: row; justify-content: flex-end; color: #FF3B00; }
	.cuicon{ font-size: 18px; }  
	
	.regFrom_tom_yzlabel{ width: 60%; text-align: right; }
	.cuIcon-squarecheckfill{ background: #FF3B00; position: relative; border: 2px #ccc solid; box-sizing: border-box; border-radius: 3px; }
	.cuIcon-square{ background: #fff; border: 2px #ccc solid; box-sizing: border-box; border-radius: 3px; }
	
</style>



